  <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页广告</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
    <!--标签插件-->
    <link rel="stylesheet" href="/lib/js/jquery-tags-input/jquery.tagsinput.min.css">
    <link href="/lib/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <!-- <form action="#!" method="post" class="row">-->
                    <input id="pid" type="hidden" th:value="${product.id}">
                    <div class="form-group col-md-12">
                        <label for="seo_keywords0">产品名称</label>
                        <input type="text" class="form-control" id="seo_keywords0" name="seo_keywords0" th:value="${product.name}" placeholder="请输入名称" />
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords1">产品单价</label>
                        <input type="text" class="form-control" id="seo_keywords1" name="seo_keywords" th:value="${product.price}" placeholder="请输入单价" />
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords2">产品描述</label>
                        <input type="text" class="form-control" id="seo_keywords2" name="seo_keywords" th:value="${product.description}" placeholder="请输入描述" />
                    </div>
                    <div class="form-group col-md-12" >
                        <label for="seo_keywords3">产品类别</label>
                        <select class="form-control" id="seo_keywords3" name="seo_keywords" th:value="${product.type}"  placeholder="请输入类别" >

                        </select>
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords4">库存数量</label>
                        <input type="text" class="form-control" id="seo_keywords4" name="seo_keywords" th:value="${product.stock}" placeholder="请输入数量" />
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords5">产品状态</label>
                        <select type="text" class="form-control" id="seo_keywords5" name="seo_keywords" th:value="${product.state}" >
                            <option value="1">在售</option>
                            <option value="2">下架</option>
                        </select>
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords6">产品上架时间</label>
                        <input  type="text" disabled="disabled" class="form-control" id="seo_keywords6" name="seo_keywords" th:value="${product.createTime}" >
                    </div>
                    <div class="form-group col-md-12">
                        <label for="seo_keywords7">产品上次修改时间</label>
                        <input  type="text" disabled="disabled" class="form-control" id="seo_keywords7" name="seo_keywords" th:value="${product.updateTime}" >
                    </div>
                    <div class="form-group col-md-12">
                        <label>商品图片</label>
                        <div class="form-controls">
                            <ul class="list-inline clearfix lyear-uploads-pic">
                                <li class="col-xs-4 col-sm-3 col-md-2">
                                    <figure>
                                        <img id="img0" th:src="${product.picture}" alt="图片一">
                                    </figure>
                                </li>
                                <li class="col-xs-4 col-sm-3 col-md-2">
                                    <form name="form0" id="form0" enctype="multipart/form-data">
                                        <input type="file" name="file" id="file0" multiple="multiple" /><br>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                    </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="subfrom()">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                    <!-- </form>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script th:inline="javascript">

    window.onload=function () {
            obj = document.getElementById("seo_keywords5");
            for(i=0;i<obj.length;i++){
                if(obj[i].value==[[${product.state}]])
                    obj[i].selected = true;
            };
        $.ajax({
            url: '/product/typename',//上传地址
            type: 'POST',
            cache: false,
            data: new FormData($('#form0')[0]),//表单数据
            processData: false,
            contentType: false,
            success: function (message) {
                if (message.code ==0) {
                    var type=""
                    for (var i=0; i< message.data.length;i++){
                        if ([[${product.type}]]==message.data[i].id){
                            type+="<option selected value='"
                                + message.data[i].id+
                                "'>\n" +
                                message.data[i].name
                                +"    </option>"
                        }else {
                            type+="<option value='"
                            + message.data[i].id+
                            "'>\n" +
                                message.data[i].name
                            +"    </option>"}

                    }
                    $("#seo_keywords3").append(type)
                }
            }
        })
    }
</script>
<script th:inline="javascript">
    var imgsrc=""
    /*上传前图片展示*/
    $("#file0").change(function(){
        var type=this.files[0].name;
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        var fileType = type.substr(type.length - 4, type.length);
        if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.tif' ||
            fileType == '.gif' || fileType == '.png' || fileType == '.pcx'  ||
            fileType == '.tga'|| fileType == '.exif'|| fileType == '.fpx'   ||
            fileType == '.svg'|| fileType == '.psd'|| fileType == '.cdr'   ||
            fileType == '.pcd' ) {
            $("#img0").attr("src", objUrl);
            console.log(objUrl)
        }else {
            alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")
        }
    }) ;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    /*代码上传*/
    function subfrom() {
        $.ajax({
            url: '/file/upload',//上传地址
            type: 'POST',
            cache: false,
            data: new FormData($('#form0')[0]),//表单数据
            processData: false,
            contentType: false,
            success: function (rtn) {
                if (rtn.status == 'error') {
                    alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
                } else {
                    /*上传成功*/
                    imgsrc="https://"+rtn.name;
                    console.log("https://"+rtn.name)
                    subimg();
                }
            }
        });

    }

    function subimg() {
        if( imgsrc.length>0){
            $.ajax({
                url:"/product/update",
                type:'post',
                data:{
                    id:$("#pid").val(),
                    name:$("#seo_keywords0").val(),
                    price:$("#seo_keywords1").val(),
                    description:$("#seo_keywords2").val(),
                    type:$("#seo_keywords3").val(),
                    stock:$("#seo_keywords4").val(),
                    state:$("#seo_keywords5").val(),
                    /*createTime:datetime1,
                    updateTime:datetime,*/
                    picture:imgsrc
                },
                datatyp:'json',
                success:function (message) {
                    if (message.code==0){
                        //正确
                        alert("更新成功！")
                    }else {
                        alert("更新失败！")
                    }
                }
            })
        }else {
            alert("更新失败！")
        }

    }
    /*获取当前时间*/
    function init(){
        var date=new Date();
        //年
        var year=date.getFullYear();
        //月
        var month=date.getMonth()+1;
        //日
        var day=date.getDate();
        //时
        var hh=date.getHours();
        //分
        var mm=date.getMinutes();
        //秒
        var ss=date.getSeconds();
        var rq=year+"-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
        return rq
    }
</script>
<script type="text/javascript" src="/lib/js/jquery.min.js"></script>
<script type="text/javascript" src="/lib/js/bootstrap.min.js"></script>
<!--标签插件-->
<script src="/lib/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/lib/js/main.min.js"></script>
</body>
